pacman, rainbows, and roller s
AETHANHHOA.TK
Thể hiện đẳng cấp website uy tín
FORUM
WAP
UPLOAD
Đây là phần tổng quát đểcác bạn nắm được sơ qua về CSS để hiểu rõ hơn thì nên xem các phần sau ha.
Làm việc nào.phần này mình sẽ nói sơ qua vì cũng dễ hiểu thôi biết chút về html là được công việc bắt đầu .
Phần đầu:
body {
font-family : Comic Sans MS, Bold, Helvetica, sans-serif;
margin : 0 0 0 0 ;
font-weight : normal;
font-size : small;
background-color : black;
color : #FF8C00;
}
a {
text-decoration : none;
color : red;
}
Đây là phần quyết định toàn trang sẽ như thế nào nha.
Phân tích ra sẽ đơn giản hơn nhiều toàn kiến thức html thôi ak
font-weight : normal;
font-size : small;
dòng này là kiểu chữ
background-color : black;
màu của trang ở đây là màu đen black mình viết thế cho dễ hiểu các bạn có thể sử dụng mã màu.
a {
text-decoration : none;
color : red;
}
đây là màu của link liên kết màu đỏ hì.
Cơ bản là thếhãy sáng tạo thêmbằng trí tưởng tượng của mình nha.
*Lớpclass:
.footer {
color : white;
background-color :#333;
text-align : center;
font-weight : bold;
padding : 2px;
}
Lớp (class)
Nó cũng tương tự như phần đầuchỉ khác là nó đểtạo nên các khung,hiệu ứng được quyđịnh sẵn thôi
tên class này là footer:
Khác với phần đầu là ở đây quy định sẵn kíck thước
padding : 2px;
ví dụ thế
Save hai phần lại tạo một file dạng**.css
ví dụ style.css
Mã nguồn[chọn]
body {
font-family : Comic Sans MS, Bold, Helvetica, sans-serif;
margin : 0 0 0 0 ;
font-weight : normal;
font-size : small;
background-color : black;
color : #FF8C00;
}
a {
text-decoration : none;
color : red;
}
.footer {
color : white;
background-color :#333;
text-align : center;
font-weight : bold;
padding : 2px;
}
Như thếđã có một file CSS sẵn sàng cho sử dụng với một lớp footer,nhưng chẵng ai sử dụng CSS mà chỉ dùng một lớp duy nhất hãy sáng tạo thêm các lớp đẹp hơn ha .
Cụ thể về phần này ở những bài viết,dưới mình sẽ giới thiệu kỷ hơn về cú pháp,phần tử ,...
Còn sử dụng thế nào bài sau mình sẽ giải thích.
.ca{ padding-top: 10px; padding-bottom: 10px;}.itemLinks{ padding-top: 6px;}.error{ color:#ee0000; }.fHeader{color:#000000;font-size:small;margin-bottom:5px;font-weight:bold; margin-top: 10px; padding-left: 3px;}.row1{margin-bottom:0px; border-top:1px #bbbbbb dashed;padding-bottom:2px;padding-top:2px; margin:0px;}.row2{margin-bottom:0px;background-color:#ffffff;border-top:1px dashed #bbbbbb;padding-bottom:2px;padding-top:2px; margin:0px;}.row_single{margin-bottom:0px;background-color:#ffffff; border-top:1px dashed #bbbbbb;border-bottom:1px dashed#bbbbbb;padding-bottom:2px;padding-top:2px;}.zFQuote{padding:15px 0px;background:#f9f9f9;font-size:x-small;}.fQH{color:#555555;font-style:italic;}a { color:#960000;text-decoration:none;text-decoration:underline}a:hover{text-decoration:underline;}.imenu{border:1px #ffffff solid;margin-top:4px;}a .imenu {margin-right:4px;}a:focus .imenu {border:1px#888888 solid;}a:hover .imenu {border:1px#888888 solid;}a:active .imenu {border:1px#888888 solid;}form {margin-bottom:12px;}h1{font-weight: bold; font-size: 120%; padding-bottom: 5px; padding-top: 5px; padding-left: 3px; margin:0px;}h2{color:#000000;font-weight:bold;font-size:small;margin-bottom:11px; padding-top: 10px; margin:0;}img.pgthumb{margin-right:5px;vertical-align:middle;border:0px;}img.avth{margin-right:5px;vertical-align:middle;}span.date{ font-size:x-small;color:#517ca8;}img.fstat{vertical-align:middle;margin-right:4px;}.dlText, .dlText a{ font-size: small; }.zerozero {width:0em;height:0em;}.logo {margin-bottom:14px;text-align:center;}.smaato {}.smaatoText {}.zcodeHelp{ text-decoration: none; font-weight: bold;}.sortOpt {font-size:x-small;background-color:#f0f0f0;padding:2px;border-bottom:1px #bbb solid;border-top:1px #bbb solid;}/** WAP rewamp 2011-08-05*/body{font-family: arial,helvetica,verdana,sans-serif;margin: 0px;font-size: small;}.rl{ background-color :#66CC00; color: black;margin-top : 1px; margin-bottom : 1px; padding : 2px; border : 1px solid #FFFFFF; }.rlA{color: white;font-weight: bold;}.rlB{ background-color :#00FFFF; color: black;margin-top : 1px; margin-bottom : 1px; padding : 2px; border : 1px solid #FFFFFF; }.rlC{ background-color :blue; color: black;margin-top : 1px; margin-bottom : 1px; padding : 2px; border : 1px solid #FFFFFF; }.menu{ background: #F3F3F3; color: #4A4A4A; margin-top: 1px; padding: 1px; border: 1px solid #BBBBBB; }.bmenu{ background:#F3F3F3; color: #4A4A4A; margin-top: 1px; padding: 1px; border: 1px solid#BBBBBB; }.nen{ background: #FFFFFF; color: #4A4A4A; margin-top: 1px; padding: 1px; border: 1px solid #BBBBBB; }.iljin{background:#7dbc28;color:white;font-weight: bold;padding: 20px auto; margin-top: 20px auto;}
Đây là toàn bộ file CSS của mình đưa lên đây mình chưa hề sửa tí nào các bạn từ từ mà nghiên cứu.
Còn đây là css của một số wap khác:
*Của manhmg.wapsite.me:
body {color: #f0f;margin: 0;font: 12px tahoma;}a:link, a:active, a:visited {color: #f0f;text-decoration: none;}a:hover, a:focus {color: #939393;}a.ico {padding-left: 9px;background: url(images/arrow.gif) no-repeat left;}a.ico:hover {background: url(images/arrowh.gif) no-repeatleft;}img {vertical-align: middle;border-style: none;}.head {text-shadow: #e6daac 1px 1px;color: #fff;font-size: 18px;font-weight: bold;padding: 3px;border-bottom: 1px solid #f0f;background: #ffa0ff;}.head a {color: #444;}.h {color: #fff;font-weight: bold;padding: 4px;border-top: 1px solid #f0f;background: #f0f url(images/h.gif) repeat-x top;}.main {margin-top: 1px;margin-bottom: 1px;padding: 2px;background: url(images/main.gif)repeat-x top;}.titl {color: #fff;margin-left: 2px;padding: 2px 10px;display: inline-table;background: #f0f url(images/titl.gif) repeat-x top;}.menu {margin: 2px;padding: 3px;border: 1px solid #f0f;background: #f8f8f8;}.adv {padding: 3px;border-top: 1px solid #e8e8e8;border-bottom: 1px solid#e8e8e8;background: #f7f7f7;}.adv a {color: #7b7b7b;padding-left: 12px;background: url(images/ads.gif) no-repeat left;}.adv a:hover {color: #fe9b00;background: url(images/adsh.gif)no-repeat left;}.nav {text-align: center;padding: 3px;border-top: 1px solid #f5e9b8;border-bottom: 1px solid#ffe993;background: #4060ff url(images/nav.gif) repeat-x top;}.copy {color: #000; font-size: 11px;margin-top: 1px;padding: 4px;border-bottom: 1px solid #f0f;background: #ffa0ff;}.copy a {color: #868686;}.count {text-align: center;padding: 2px;background: url(images/counter.gif) repeat-x top;}.titl, .menu {border-radius: 4px;}
Thống kê
• Online:1
• Hôm nay:1
• Trong tuần:1
• Trong tháng:1
• Tổng số:162
• Copyright of: Trịnh Đình Tài/A1-YĐ1-TH
• Email: edoshikai@yahoo.com
Log in